<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= article.title %> </title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        .root {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }

        .titleImage {
            width: 690px;
            margin: 0 auto;
        }
        .articleTitle {
            width: 690px;
        }
        .authorInfo {
            display: flex;
            flex-direction: row;
            width: 100%;
            height: auto;
            align-items: center;


        }
        .author-pic {
            width: 60px;
            height: 60px;
            background: #e8e8e8;
            border-radius: 100%;
            margin: auto;
        }
        .detail {
            width: 72%;
            height: 60px;
            margin-left: 10px;

        }
        .authorName {
            margin-top: 5px;
            font-size: medium;
        }
        .sign {
            margin-top: 5px;
            font-size: small;
        }

        /* 关注他按钮 */
        button {
            border: 2px solid #24b4fb;
            background-color: #24b4fb;
            border-radius: 0.9em;
            padding: 0.5em 1.2em 0.5em 1em;
            transition: all ease-in-out 0.2s;
            font-size: 16px;
        }
        button span {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-weight: 600;
        }
        button:hover {
            background-color: #0071e2;
        }

        .collectPubDate {
            margin: 0px 0px 10px 50px;
        }

        .mainContent {
            width: 690px;
            height: auto;
        }

        .userComment {
            width: 690px;
            display: flex;
            flex-direction: row;

        }
        .comment-box {
            display: flex;
            margin: 15px;
        }

    </style>
</head>
<body>
    <div class="root">
        <div class="head-nav">
            <div class="ColumnPageHeader-Wrapper" style="margin-bottom: 60px;">
                <nav class="nanbar navbar-inverse navbar-fixed-top big" role="navigation">
                    <div class="container">
                        <div class="navbar-header">
                            <a href="/index" class="navbar-brand">Forum</a>
                            </div>
                            <div class="collapse navbar-collapse">
                            <!-- 下来菜单 -->
                            <div class="dropdown navbar-right userInfo">
                                <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"
                                    style="background-color: #111111;">
                                    <img src="/images/html.jpg" class="user_pic img-circle" style="width: 30px;height: 30px;">
                                <!-- <span class="caret"></span> -->
                                </button>
                                <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1" style="width: 50px;">
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="-1" href="/my/setting">个人设置</a>
                                    </li>
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="-1" href="/login">退出登录</a>
                                    </li>
                                </ul>

                            </div>
                            <button class="navbar-right btn-info btn" style="margin-top: 7px;" type="button" onclick="window.location.href='/my/edit'">
                                发表文章
                            </button>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
        <div class="main">
            <div class="articleHead">
                <div class="image">
                    <% let img = '/images/html.jpg' %>
                    <% let art_pic =  article.image  %>
                    <img class="titleImage"
                        src=<%=  (art_pic !== null) ?  art_pic  :  img %>
                        alt="图片加载失败">
                </div>
                <h2 class="articleTitle"><%= article.title %> </h1>
                <div class="authorInfo">
                    <div>
                        <% let author_pic =  author.user_pic  %>
                        <img class="author-pic" src="<%=  (author_pic !== null) ?  author_pic  :  img %>"/>
                    </div>
                    <div class="detail">
                        <div class="authorName">
                            <span class="name">
                                <a href="/authorDetail" class="userLink" target="_blank"><%= author.username %></a>
                            </span>
                        </div>
                        <div class="sign">
                            <span class="authorSign">
                                <%= author.signature %>
                            </span>
                        </div>
                    </div>
                    <div class="followBtn">
                        <button>
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                                    <path fill="none" d="M0 0h24v24H0z"></path>
                                    <path fill="currentColor" d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"></path></svg> 关注他
                            </span>
                        </button>
                    </div>
                </div>
                <div class="approvePubDate" style="margin-top: 10px;">
                    <span class="apprave" style="margin-left: 70px;"><%= article.approve %> 点赞</span>
                    <span class="pubdate" style="margin-left: 100px;"><%= article.pubdate %></span>
                </div>
            </div>
            <div class="mainContent" data-articleId="<%= article.articleId %>">
                <!-- 文章内容 -->
                <div id="contentBox" style="margin: 50px 10px 20px 10px;">
                    <%- article.content %>
                </div>
            </div>
            <div class="comments" style="margin-top: 100px; margin-bottom: 200px;">
                <h3 style="color: #111111; font-weight: bold;">评论</h3><hr />
                <div class="userComment userInfo">
                    <img class="author-pic user_pic"  src="/images/html.jpg"/>
                    <!-- <textarea class="form-control"  rows="3" id="commentText"
                        style="margin: 0px 15px 0px 5px; width: 75%; height: 60px; resize:none;">
                    </textarea> -->
                    <input class="form-control form-control-lg" id="commentText" type="text"
                        style="margin: 0px 15px 0px 5px; width: 75%; height: 60px;" placeholder="请填写精彩评论" >
                    <button style="margin-right: 10px;" id="addComment">
                        <span>发表</span>
                    </button>
                </div>

                <div class="allComment" style="width: 690px;">
                    <% allComment.forEach(comm => { %>
                    <hr />
                    <div class="comment-box">
                        <div>
                            <% let commAuthorImg =  comm.commAuthor.user_pic  %>
                            <img class="author_pic" src="<%=  (commAuthorImg !== null) ?  commAuthorImg  :  img %>"
                                style="width: 30px; height: 30px;"/>
                        </div>

                        <div class="detail">
                            <div class="userName">
                                <span class="userName" style="font-weight: bold;">
                                    <%= comm.commAuthor.username %>
                                </span>
                            </div>
                            <div class="comment">
                                <span>
                                    <%= comm.comment.content %>
                                </span>
                            </div>
                        </div>
                    </div>
                    <% }); %>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(() => {

            // 发表评论
            $("#addComment").on('click', () => {
                var comment = {
                    articleId : $(".mainContent").attr("data-articleId"),
                    userId : $(".userInfo").attr("data-userId"),
                    content : $("#commentText").val()
                }
                if(!comment.content) {
                    alert("评论内容不能为空")
                } else {
                    addComment(comment)
                }
            })

            function addComment(comment) {
                $.ajax({
                    type: "POST",
                    url: "/my/addcomment",
                    data: comment,
                    success: function (response) {
                        if(response.status !== 0) {
                            alert("评论失败")
                        }
                        $("#commentText").val("")
                    }
                });
            }


        })
    </script>
    <script src="/javascripts/baseApi.js"></script>
    <script src="/javascripts/getuser.js"></script>
</body>
</html>